<template>
    <div>
        <el-dialog
            title="模型参数设置"
            :visible.sync="is_display"
            width="42%">
            <el-form :rules="rules"  :inline="true" ref="loadderObj" :model="loadderObj" label-width="80px">
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="基础模型">
                            <el-select v-model="loadderObj.basicModel" placeholder="请选择基础模型">
                                <el-option
                                v-for="model in modelList"
                                :key="model.id"
                                :label="model.modelName"
                                :value="model.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="模型名称" prop="modelName">
                            <el-input placeholder="请输入模型名称" v-model="loadderObj.modelName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="批加载" prop="batchSize">
                            <el-input placeholder="请输入批加载大小" v-model="loadderObj.batchSize"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="是否随机" prop="shuffle">
                            <el-radio-group v-model="loadderObj.shuffle">
                                <el-radio label="1">随机</el-radio>
                                <el-radio label="0">不随机</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clear_loadder_model_info()">取 消</el-button>
                <el-button type="primary" @click="save_loadder_model_info()">确 定</el-button>
            </span> 
        </el-dialog>
        <el-dialog
            title="模型参数设置"
            :visible.sync="dialogVisible"
            :dialogVisible='true'
            width="40%">
            <el-form :rules="rules"  :inline="true" ref="layerObj" :model="layerObj" label-width="80px">
                <el-form-item label="学习率" prop="learnRate">
                    <el-input placeholder="请输入草药名" v-model="layerObj.learnRate"></el-input>
                </el-form-item>
                <el-form-item label="冻结率" prop="freezeRate">
                    <el-input placeholder="请输入拉丁名学名" v-model="layerObj.freezeRate"></el-input>
                </el-form-item>
                <el-form-item label="衰减率" prop="attenuationRate">
                    <el-input placeholder="请输入拉丁名学名" v-model="layerObj.attenuationRate"></el-input>
                </el-form-item>
                <el-form-item label="学习次数" prop="epoch">
                    <el-input placeholder="请输入拉丁名学名" v-model="layerObj.epoch"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save_layer_info()">确 定</el-button>
            </span>
        </el-dialog>
        <el-row>
        <el-col :span="16" style="padding-right: 10px;">
            <!-- 模型信息显示 -->
            <div class="num">
                <el-card class="box-card" :body-style="{ display:'flex'}">
                    <i class="icon" :class="`el-icon-${countData[0].icon}`" :style="{background:countData[0].color}"></i>
                    <div class="detail">
                        <p class="item_val">{{ countData[0].value }}</p>
                        <p class="item_name">{{ countData[0].name }}</p>
                    </div>
                </el-card>
                <el-card class="box-card" :body-style="{ display:'flex'}">
                    <i class="icon" :class="`el-icon-${countData[1].icon}`" :style="{background:countData[1].color}"></i>
                    <div class="detail">
                        <p class="item_val">{{ countData[1].value }}</p>
                        <p class="item_name">{{ countData[1].name }}</p>
                    </div>
                </el-card>
                <el-card class="box-card" :body-style="{ display:'flex'}">
                    <i class="icon" :class="`el-icon-${countData[2].icon}`" :style="{background:countData[2].color}"></i>
                    <div class="detail">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="模型版本">
                                <el-select @change="selectChanged" v-model="targetModel.id" placeholder="请选择模型版本">
                                    <el-option
                                    v-for="model in modelList"
                                    :key="model.id"
                                    :label="model.modelName"
                                    :value="model.id"
                                    
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </div>
            <el-card style="height:280px">
                <!-- 折线图 -->
                <div ref="echarts1" style="height: 280px;"></div>
            </el-card>
            <!-- <el-card class="box-card" style="margin-top: 20px ;height:125px">
                    <div>
                        <el-table
                        :data="tableData"
                        style="width: 100%" height="100px">
                            <el-table-column prop="name" label="药材名称" width="120"></el-table-column>
                            <el-table-column prop="latin_name" label="拉丁学名" width="250"></el-table-column>
                            <el-table-column label="准确率">
                                <template slot-scope="scope">
                                    <el-progress :percentage="scope.row.accuracy_rate.toFixed(1)" :color="getStatus(`${scope.row.accuracy_rate}`)"></el-progress>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card> -->
                <el-card class="box-card" style="margin-top: 20px ;height:250px">
                    <div>
                        <el-descriptions title="模型信息" column="4">
                            <el-descriptions-item label="批加载">{{ targetModel.model.batchSize }}</el-descriptions-item>
                            <el-descriptions-item label="随机">{{ targetModel.model.shuffle==1?'是':'否' }}</el-descriptions-item>
                        </el-descriptions>
                        <span style=" font-size: 15px;">LearyOne:</span>
                        <el-descriptions column="4" labelStyle="font-size=12px" style="margin-left: 100px;">
                            <el-descriptions-item label="学习率">{{ targetModel.model.layearOne.learnRate }}</el-descriptions-item>
                            <el-descriptions-item label="冻结率">{{ targetModel.model.layearOne.freezeRate }}</el-descriptions-item>
                            <el-descriptions-item label="衰减率">{{ targetModel.model.layearOne.attenuationRate }}</el-descriptions-item>
                            <el-descriptions-item label="学习次数">{{ targetModel.model.layearOne.epoch }}</el-descriptions-item>
                        </el-descriptions>
                        <span style=" font-size: 15px;">LearyTwo:</span>
                        <el-descriptions column="4" labelStyle="font-size=12px" style="margin-left: 100px;">
                            <el-descriptions-item label="学习率">{{ targetModel.model.layearTwo.learnRate }}</el-descriptions-item>
                            <el-descriptions-item label="冻结率">{{ targetModel.model.layearTwo.freezeRate }}</el-descriptions-item>
                            <el-descriptions-item label="衰减率">{{ targetModel.model.layearTwo.attenuationRate }}</el-descriptions-item>
                            <el-descriptions-item label="学习次数">{{ targetModel.model.layearTwo.epoch }}</el-descriptions-item>
                        </el-descriptions>
                        <span style=" font-size: 15px;">LearyThree:</span>
                        <el-descriptions column="4" labelStyle="font-size=12px" style="margin-left: 100px;">
                            <el-descriptions-item label="学习率">{{ targetModel.model.layearThree.learnRate }}</el-descriptions-item>
                            <el-descriptions-item label="冻结率">{{ targetModel.model.layearThree.freezeRate }}</el-descriptions-item>
                            <el-descriptions-item label="衰减率">{{ targetModel.model.layearThree.attenuationRate }}</el-descriptions-item>
                            <el-descriptions-item label="学习次数">{{ targetModel.model.layearThree.epoch }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-card>
        </el-col>
        <el-col :span="8" style="padding-left: 10px;">
            <el-form class="new_model_data"  label-width="80px">
                <el-card class="data_card">
                    <div slot="header" class="clearfix">
                        <span>data_loadder</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="set_loadder_model()">设置</el-button>
                    </div>
                    <div class="model_info">
                        <div>
                                <el-col :span="6"><div class="grid-content bg-purple">{{ labelData.batchSize }}</div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">{{ modelData.batchSize || 0}}</div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">{{ labelData.shuffle }}</div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">{{ modelData.shuffle=="1" ? '是':'否'}}</div></el-col>
                        </div>
                    </div>
                </el-card>
                <el-card class="data_card">
                    <div slot="header" class="clearfix">
                        <span>Linear_learn</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="set_model(0)">设置</el-button>
                    </div>
                    <div v-for="(item,index) in modelData.layerData[0]" :key="index" class="model_info">
                            <el-col :span="6"><div class="grid-content bg-purple">{{ labelData[index] }}</div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">{{ item || 0}}</div></el-col>
                    </div>
                </el-card>
                <el-card class="data_card">
                    <div slot="header" class="clearfix">
                        <span>freeze_learn_One</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="set_model(1)">设置</el-button>
                    </div>
                    <div v-for="(item,index) in modelData.layerData[1]" :key="index" class="model_info">
                            <el-col :span="6"><div class="grid-content bg-purple">{{ labelData[index] }}</div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">{{ item || 0}}</div></el-col>
                    </div>
                </el-card>
                <el-card class="data_card">
                    <div slot="header" class="clearfix">
                        <span>freeze_learn_Two</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="set_model(2)">设置</el-button>
                    </div>
                    <div v-for="(item,index) in modelData.layerData[2]" :key="index" class="model_info">
                            <el-col :span="6"><div class="grid-content bg-purple">{{ labelData[index] }}</div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">{{ item || 0}}</div></el-col>
                    </div>
                </el-card>
                <div class="manage-button">
                    <el-button type="primary" @click="handleModel()" > 启动 </el-button>
                    <el-button type="primary" @click="emptyModel()" > 重置 </el-button>
                </div>
            </el-form>
        </el-col>
    </el-row>
    </div>
    
</template>
<script>
import * as echarts from 'echarts'
export default {
    data(){
        return {
            targetModel:{
                id: "",
                model:{
                    layearOne:{},
                    layearTwo:{},
                    layearThree:{}
                },
            },
            modelList:[],
            layearState:0,
            is_display:false,
            dialogVisible:false,
            accuracy_rate:[],
            loss_rate:[],
            tableData: [],
            
            labelData:{
                batchSize:'批加载大小',
                shuffle:'完全随机',
                learnRate:'学习率',
                freezeRate:'冻结率',
                attenuationRate:'衰减率',
                epoch:'学习次数'
            },
            layerObj:{learnRate:'',freezeRate:'',attenuationRate:'',epoch:''},
            loadderObj:{modelName:'',basicModel:'',batchSize:'',shuffle:''},
            modelData:{  
                modelName:'',
                basicModel:'',
                batchSize:'',
                shuffle:'',
                layerData:[
                    {learnRate:'',freezeRate:'',attenuationRate:'',epoch:''},
                    {learnRate:'',freezeRate:'',attenuationRate:'',epoch:''},
                    {learnRate:'',freezeRate:'',attenuationRate:'',epoch:''}
                ]
            },
            rules:{
                modelName:[
                    {required: true , message: '请输入模型名称', trigger: 'blur'}
                ],
                learnRate:[
                    {required: true , message: '请输入学习率', trigger: 'blur'}
                ],
                freezeRate:[
                    {required: true , message: '请输入冻结率', trigger: 'blur'}
                ],
                attenuationRate:[
                    {required: true , message: '请输入衰减率', trigger: 'blur'}
                ],
                epoch:[
                    {required: true , message: '请输入学习次数', trigger: 'blur'}
                ],
                batchSize:[
                    {required: true , message: '请输入批加载大小', trigger: 'blur'}
                ],
                shuffle:[
                    {required: true , message: '请选择是否完全随机', trigger: 'change'}
                ],       
            },
        }
    },
    computed:{
        countData(){
            let accuracyRate=0.0
            let lossRate=0.0
            if(this.targetModel.model!=undefined){
                accuracyRate=this.targetModel.model.accuracyRate
                lossRate=this.targetModel.model.lossRate
                lossRate=Math.floor(lossRate * 1000) / 1000 
                accuracyRate=(Number(accuracyRate)*100).toFixed(2)
            }
            return [
                {
                name: "模型准确率",
                value: accuracyRate.toString()+"%",
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "模型损失率",
                value: lossRate,
                icon: "s-help",
                color: "#ffb980",
                },
                {
                name: "模型版本",
                value: "resnet50_3.24.2",
                icon: "star-on",
                color: "#5ab1ef",
                }
            ]
        }
       
    },
    methods:{ 
        getStatus(val){
            let color=""
            if(val>=80){
                color="#409eff"
            }else if(val<80 && val>=60){
                color="#e6a23c"
            }else{
                color="#f56c6c"
            }
            return color
        },
        selectChanged(){
            this.$axios.get("/getModelData",{params:{id:this.targetModel.id}}).then(({data}) => {
                this.targetModel.model=data.data.targetModel
                this.tableData=data.data.tableData
                this.accuracy_rate=data.data.trainDataMap.accuracy_rate
                this.loss_rate=data.data.trainDataMap.loss_rate
                this.showLineChart()
                console.log(this.targetModel.model)
                console.log(data)
            })

        },

        clear_loadder_model_info(){
            Object.keys(this.loadderObj).forEach(key => (this.loadderObj[key] = ''));
            this.is_display = false
        },
        handleModel(){
            console.log(this.modelData)
            this.$axios.post("/handelModel",JSON.stringify(this.modelData),{headers:{'Content-Type':'application/json'}}).then(({data}) => {// 请求成功，返回
                console.log(data);
                if(data.code==200){
                    this.$message({
                        type: 'success',
                        message: data.data.message
                    });
                    // this.emptyModel();
                }else {
                        this.$message({
                        type: 'error',
                        message: data.data.message
                    });
                }
            }).catch((err) => {// 请求失败
                console.log(err);
            });
            
        },
        getModelList(){
            this.$axios.get("/getModelList").then(({data}) => {
                console.log(data)
                this.modelList=data.list
                for (let i = 0; i < data.list.length; i++) {
                    if(data.list[i].status==1){
                        this.targetModel.id=data.list[i].id
                        this.selectChanged()
                    }
                }
            })
        },
        set_model(layer){
            if(this.$refs.layerObj!==undefined){
                this.$refs.layerObj.resetFields()
            }
            this.layearState = layer
            this.layerObj = JSON.parse(JSON.stringify(this.modelData.layerData[layer]))
            this.dialogVisible = true
        },
        set_loadder_model() { 
            if(this.$refs.loadderObj!==undefined){
                this.$refs.loadderObj.resetFields()
            }
            this.is_display = true
            this.loadderObj = JSON.parse(JSON.stringify(this.modelData.loadderData))
        },
        save_loadder_model_info(){
            this.$refs.loadderObj.validate((valid) => {
                if(valid){
                    let obj=JSON.parse(JSON.stringify(this.loadderObj))
                    this.modelData.modelName=obj.modelName
                    this.modelData.basicModel=obj.basicModel
                    this.modelData.batchSize=obj.batchSize
                    this.modelData.shuffle=obj.shuffle
                    console.log(obj)
                    this.is_display= false
                }
             });
        },
        save_layer_info(){
            this.$refs.layerObj.validate((valid) => {
                if(valid){
                    this.modelData.layerData[this.layearState]=JSON.parse(JSON.stringify(this.layerObj))
                    this.dialogVisible= false
                }
             });
        },
        emptyModel(){
            this.modelData=JSON.parse(JSON.stringify(this.emptyModelData))
            this.$message({
                type: 'success',
                message: '重置成功!'
            });
        },
        showLineChart(){
            const echarts1 = echarts.init(this.$refs.echarts1);
            // 配置图表选项
            const option = {
            title: {
                text: 'Accuracy and Loss Rates'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Accuracy Rate', 'Loss Rate']
            },
            xAxis: {
                type: 'category',
                data: Array.from({length: this.accuracy_rate.length }, (val, i) => i+1)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                name: 'Accuracy Rate',
                type: 'line',
                symbol: 'none',
                data: this.accuracy_rate
                },
                {
                name: 'Loss Rate',
                type: 'line',
                symbol: 'none',
                data: this.loss_rate
                }
            ]
            }
            echarts1.setOption(option) // 使用刚指定的配置项显示图表
        }
    },
    mounted(){
        this.getModelList();

        this.emptyModelData= JSON.parse(JSON.stringify(this.modelData))
        this.emptylayearData= JSON.parse(JSON.stringify(this.layerObj))
    }
}
</script>


<style lang="less" scoped>

.new_model_data{
    .data_card{
        margin-bottom: 15px;
    }
}
.manage-button{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
.num{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .icon{
        width: 50px;
        height: 50px;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        color: #FFF;
    }
    .detail{
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .item_val{
            font-size: 20px;
            margin-bottom: 3px;
            line-height: 30px;
            height: 30px;
        }
        .item_name{
            font-size: 11px;
            color: #999;
            text-align: center;
        }
    }
    .el-card{
        width: 32%;
        margin-bottom: 20px;
    }
}

.grid-content{
    margin-bottom: 15px;
}
</style>